<template>
  <div style="padding: 10px;overflow: hidden">
    <div class="left">
      <div class="top">
        <h4>会员信息</h4>
        <div class="top-left">
          <p>会员卡号:253462</p>
          <p>会员姓名:{{details[0].totalorderCustomer}} </p>
          <p>会员等级:黄金会员</p>
        </div>
        <div class="top-right">
          <p>卡金余额: ￥100.00</p>
          <p>赠金余额: ￥200.00</p>
          <p>会员积分: 1500分</p>
        </div>
      </div>
      <div class="bottom">
        <h4>订单明细</h4>
        <div style="overflow: hidden">
          <div class="bottom-left">
            <p>订单号:   {{details[0].totalorderNumber}}</p>
            <p>开台时间:  {{details[0].totalorderStarttime}}</p>
          </div>
          <div class="bottom-right">
            <p>服务人数: 1</p>
            <p>房间号:  {{details[0].totalorderRoomNum}}</p>
          </div>
        </div>
     <!-- {{details[0].nfuhOrderList}} -->
        <!-- <div style="height: 200px">
          <el-table
                  size="mini"
                  :border="true"
                  :data="tableData"
                  stripe
                  style="width: 100%">
            <el-table-column
                    type="index"
                    align="center"
                    label="序号"
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="name"
                    label="项目名称"
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="num"
                    label="数量">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="price"
                    label="单价">
              <template :slot-scope="details">￥{{orderPrice}}</template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="discount"
                    label="折扣">
              <template :slot-scope="details">￥{{orderPricet}}</template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="allCount"
                    label="小计">
              <template :slot-scope="details">￥{{orderPrice}}</template>
            </el-table-column>
          </el-table>
          <h3 style="float: right;color: red">合计：{{total}}</h3>
        </div> -->
      <el-table :data="details[0].nfuhOrderList" border style="width: 100%">
					<el-table-column prop="id" label="序号" width="95">
					</el-table-column>
					<el-table-column prop="orderServicetype" label="消费项目" width="95">
					</el-table-column>
          	<el-table-column prop="orderNumber" label="数量" width="95">
					</el-table-column>
					<!-- <el-table-column prop="orderTechnician" label="技师" width="85"> -->
					<!-- </el-table-column> -->
					<el-table-column prop="orderPrice" label="价格" width="85">
					</el-table-column>
					<el-table-column prop="orderPrice" label="折扣" width="95">
					</el-table-column>
				
					<el-table-column prop="orderPrice" label="小计" >
					</el-table-column>
				</el-table>
      </div>
    </div>
    <div class="right">
      <h4>抵扣信息</h4>
      <div class="right-item">
        <div style="overflow: hidden;padding-left: 46px">
          <span>消费券</span>
          <div class="item-input">
            <el-select v-model="value" placeholder="不使用" size="mini">
              <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>

      </div>
      <div class="right-item">
        <div style="overflow: hidden;padding-left: 46px">
          <span>试用积分</span>
          <div class="item-input">
            <el-input
                    v-model="input"
                    placeholder="请输入内容"
                    size="mini"
            >
            </el-input>
          </div>

        </div>

      </div>
      <div class="right-item">
        <div style="overflow: hidden;padding-left: 46px">
          <span>优惠方案</span>
          <div class="item-input">
            <el-select v-model="value" placeholder="不使用" size="mini">
              <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="right-item">
        <div style="overflow: hidden;padding-left: 46px">
          <span>抹零</span>
          <div class="item-input">
            <el-input
                    v-model="input"
                    placeholder="0.10"
                    size="mini"
            >
            </el-input>
          </div>

        </div>
      </div>
      <div style="text-align: right">
        <p>优惠券折扣:-￥120</p>
        <p>积分折扣:0.00</p>
        <p>优惠金额:-10</p>
        <p style="font-size: 14px">应收合计: <span style="color: red">{{details[0].totalorderPrice}}.00</span></p>
      </div>
      <img src="../assets/jiesuan.png" alt="" @click="linkto">
    </div>
  </div>
</template>

<script>
 import { createNamespacedHelpers } from 'vuex'
 const {mapState, mapActions} = createNamespacedHelpers('order')
  export default {
    name: "Settlement",
    data() {
      return {
        tableData: [
          {

            name: '欧迪足道',
            num: '1',
            price: '108',
            discount: '78',
            allCount: '78'
          }, {

            name: '欧迪足道',
            num: '1',
            price: '108',
            discount: '78',
            allCount: '78'
          }, {

            name: '欧迪足道',
            num: '1',
            price: '108',
            discount: '78',
            allCount: '78'
          }],
        value: '',
        options: [
          {
            value: '选项1',
            label: '黄金糕'
          },
          {
            value: '选项2',
            label: '双皮奶'
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          }
          ],
        input:''
      }
    },
    methods:{
  
      linkto(){
        this.$router.push('paymentMethod')
      }
    },
  
    computed: {
      ...mapState(['details']),
      total() {
        console.log(this.details);
        let total = 0;
        this.tableData.forEach(item => total += parseFloat(item.allCount));
        return total
      }
    }
  }
</script>

<style scoped lang="scss">
  .left {
    width: 59%;
    box-sizing: border-box;
    height: 500px;
    float: left;

    .top {
      border: 1px solid white;
      border-radius: 10px;
      height: 154px;
      background-color: white;
      box-sizing: border-box;
      padding: 10px;
      overflow: hidden;

      p {
        font-size: 14px;
        color: rgb(137, 137, 137);
      }

      h4 {
        margin: 0;
      }

      .top-left {
        float: left;
      }

      .top-right {
        float: right;
      }
    }

    .bottom {
      border-radius: 10px;
      background-color: white;
      height: 326px;
      margin-top: 20px;
      padding: 10px;
      box-sizing: border-box;

      h4 {
        margin: 0;
      }

      p {
        font-size: 14px;
        color: rgb(137, 137, 137);
      }

      .bottom-left {
        float: left;
      }

      .bottom-right {
        float: right;
      }
    }
  }

  .right {
    width: 40%;
    height: 500px;
    border: 1px solid white;
    border-radius: 10px;
    float: right;
    box-sizing: border-box;
    background-color: white;
    padding: 10px 20px;
    h4 {
      margin: 0;
    }
    img{
      display: inline-block;
      width: 300px;
      height: 60px;
      background-color: white;
    }
    .right-item {
      margin-top: 20px;
      text-align: left;
      line-height: 28px;
      span{
        font-size: 14px;
        display: inline-block;
        color:rgb(45,139,255);
        font-weight: bold;
        margin-right: 20px;
      }

      .item-input{
        width: 200px;
        float: right;
      }
    }
    p{
      font-size: 12px;
    }
  }
</style>